<template>
	<uni-popup ref="select" type="bottom">
		<view class="selectr-box flex_cc">
			<uni-icons type="closeempty" size="20" color="#8A8F99" class="close-icon" @click="close"></uni-icons>

			<view class="flex_fsc width-100 flex_wrap">
				<view v-if="props.remark" class="remark">
					<uni-icons type="sound-filled" size="18" color="#FF7742"></uni-icons>
					{{ props.remark }}
				</view>
				<view
					v-for="(item, index) in props.data"
					:key="item.id"
					:class="['select-item u-line-1', selectIndex === index ? 'active' : 'disable']"
					@click="selectItem(index)"
				>
					{{ item.dictLabel }}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
	data: [String, Array],
	value: [Number, String],
	remark: String
});
const emits = defineEmits(['change']);

const select = ref(),
	selectIndex = ref();

function open() {
	selectIndex.value = props.value;
	select.value.open();
}

function close() {
	select.value.close();
}

function selectItem(index) {
	selectIndex.value = index;
	emits('change', selectIndex.value);
	setTimeout(() => {
		close();
	}, 300);
}

defineExpose({
	open,
	close
});
</script>
<script>
export default {
	name: 'SelectItem'
};
</script>

<style>
.selectr-box {
	width: 688rpx;
	min-height: 298rpx;
	background: #ffffff;
	border-radius: 24px;
	margin-left: 31rpx;
	margin-bottom: 50rpx;
	position: relative;
	box-sizing: border-box;
	padding: 70rpx 16rpx 32rpx;
}

.select-item {
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
	margin-right: 16rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
}

.active {
	background: #008965;
	color: #ffffff;
}

.disable {
	background: #f0f2f5;
	color: #585c66;
}

.close-icon {
	position: absolute;
	right: 24rpx;
	top: 24rpx;
}

.remark {
	width: 688rpx;
	font-size: 24rpx;
	background: #fff4f0;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 16rpx;
	margin-bottom: 16rpx;
}
</style>
